<template>
	<view class="index-input">
		<u-popup v-model="show" mode="center" height="780upx" width="638upx" border-radius="10" :closeable="true" close-icon-color="#0081F1">
			<view style="padding: 3%">
				<view class="font-30" style="color: #333333;">筛选</view>
				<view class="font-26" style="margin-top: 40upx;margin-left: 30upx;">分发时间：</view>
				<view style="display: flex;margin-top: 19upx;">
					<view class="time">2021.04.13 13:09</view> <text style="position: relative;left: 10upx;top:5upx">-</text><view class="time">2021.04.13 13:09</view>
				</view>
				<view style="display: flex;padding-left: 20upx;padding-right: 20upx;">
					<view>
						<view class="font-26" style="margin-top: 40upx;margin-left: 10upx;">工单ID：</view>
						<view style="display: flex;margin-top: 19upx;">
							<u-input v-model="value" :type="type" :border="border" :placeholder="mobile" height="54" />	
						</view>
					</view>
					<view>
						<view class="font-26" style="margin-top: 40upx;margin-left: 30upx;">发起人：</view>
						<view style="display: flex;margin-top: 19upx;margin-left: 30upx;">
							<u-input v-model="value" :type="type" :border="border" :placeholder="mobile" height="54" />	
						</view>
					</view>
				</view>
				<view class="font-26" style="margin-left: 25upx;margin-top: 30upx;">工单类型：</view>
				<view style="display: flex;margin-left: 15upx;margin-top: 10upx;">
					<view class="btn">跟单类型</view>
					<view class="btn">废单类型</view>
					<view class="btn">投诉类型</view>
				</view>
				<view class="font-26" style="margin-left: 25upx;margin-top: 20upx;">状态：</view>
				<view style="display: flex;margin-left: 15upx;margin-top: 20upx;">
					<view class="btn">待处理</view>
					<view class="btn">待处理</view>
					<view class="btn">待处理</view>
				</view>
				<view></view>
				<view style="display: flex;justify-content: space-around;margin-top:60upx;">
					<view class="last" style="background-color: rgb(238,238,238);color: #999999;">重置条件</view>
					<view class="last" style="background-color: rgb(0,129,241);color: #FFFFFF;">确认</view>
				</view>
			</view>
			</u-popup>
							<!-- > -->
		</u-popup>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				value: '',
				type: 'text',
				border: true,
				show: false,
				mobile: '请输入',
				name: '语言培训-通用英语-成人新概念英语'
			}
		},
		methods:{
			getOpen (){
				this.show = true
			}
		}
	}
</script>

<style lang="less" scoped>
	.last{
		width: 240upx;
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		line-height: 64upx;
		border-radius: 10upx;
	}
	.btn{
		width: 125upx;
		height: 49upx;
		background: rgba(220, 234, 251, 0.3);
		border-radius: 8upx;
		text-align: center;
		line-height: 49upx;
		font-size: 26upx;
		margin-left: 10upx;
	}
	.font-30{
		font-size: 30upx;
		font-weight: bold;
	}
	.font-26{
		font-size: 26upx;
	}
	.time{
		width: 260upx;
		height: 54upx;
		border: 1upx solid #DCDCDC;
		text-align: center;
		line-height: 54upx;
		margin-left: 25upx;
	}
</style>
